<template>
    <div>
        <el-tabs v-model="searchForm.tab" @tab-change="getData">
            <el-tab-pane :label="item.name" :name="item.key" v-for="(item, index) in tabbars" :key="index"></el-tab-pane>
        </el-tabs>
        <el-card shadow="never" class="notice">
            <!-- 搜索 -->
            <Search @search="getData" @reset="resetSearchForm">
                <SearchItem label="商品名称">
                    <el-input v-model="searchForm.title" placeholder="商品名称" clearable></el-input>
                </SearchItem>
                <template #show>
                    <SearchItem label="商品分类">
                        <el-select v-model="searchForm.category_id" placeholder="商品分类" clearable>
                            <el-option v-for="item in category_list" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </SearchItem>
                </template>
            </Search>
            <!-- 新增|刷新  -->
            <ListHeader layout="create,refresh" @create="handleCreate" @refresh="getData">
                <el-button size="small" type="danger" @click="handleMultiDelete"
                    v-if="searchForm.tab !== 'delete'">批量删除</el-button>
                <el-button size="small" type="warning" v-else @click="handleRestoreGoods">恢复商品</el-button>
                <el-popconfirm v-if="searchForm.tab == 'delete'" title="是否彻底删除该商品" confirmButtonText="确认"
                    cancelButtonText="取消" @confirm.stop="handleDestoryGoods">
                    <template #reference>
                        <el-button size="small" type="danger">彻底删除</el-button>
                    </template>
                </el-popconfirm>
                <el-button size="small" @click="handleMultiStatusChange(1)"
                    v-if="searchForm.tab == 'all' || searchForm.tab == 'off'">上架</el-button>
                <el-button size="small" @click="handleMultiStatusChange(0)"
                    v-if="searchForm.tab == 'all' || searchForm.tab == 'saling'">下架</el-button>
            </ListHeader>
            <el-table ref="mulitipTableRef" @selection-change="handleSelectionChange" :data="tableData" stripe
                style="width: 100%" v-loading="loading">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="商品" width="300">
                    <template #default="{ row }">
                        <div class="noticeGoods">
                            <el-image class="noticeGoodsImage" :src="row.cover" fit="cover" :lazy="true"
                                style="width: 50px; height: 50px;"></el-image>
                            <div class="noticeGoodsDiv">
                                <p>{{ row.title }}</p>
                                <div>
                                    <span class="noticeGoodsDivSpan">￥{{ row.min_price }}</span>
                                    <el-divider direction="vertical"></el-divider>
                                    <span class="noticeGoodsDivText">￥{{ row.min_price }}</span>
                                </div>
                                <p class="noticeGoodsP1">分类：{{ row.category ? row.category.name : "未分类" }}</p>
                                <p class="noticeGoodsP2">创建时间：{{ row.create_time }}</p>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="实际销量" width="80" prop="sale_count" align="center">
                </el-table-column>
                <el-table-column label="商品状态" width="100" v-if="searchForm.tab != 'delete'">
                    <template #default="{ row }">
                        <el-tag :type="row.status ? 'success' : 'danger'" size="small">{{ row.status ? '上架' : '仓库'
                        }}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="审核状态" width="120" align="center">
                    <template #default="{ row }">
                        <div v-if="row.ischeck == 0" class="noticeStatusBtns">
                            <el-button type="success" size="small" plain>审核通过</el-button>
                            <el-button class="noticeStatusBtn" type="danger" size="small" plain>审核拒绝</el-button>
                        </div>
                        <span v-else>
                            {{ row.ischeck == 1 ? "通过" : "拒绝" }}
                        </span>
                    </template>
                </el-table-column>
                <el-table-column label="总库存" width="90" prop="stock" align="center">
                </el-table-column>
                <el-table-column label="操作" align="center">
                    <template #default="scope">
                        <div v-if="searchForm.tab != 'delete'">
                            <el-button class="noticeActionBtn1" type="primary" size="small" text
                                @click="handleEdit(scope.row)">修改</el-button>
                            <el-button class="noticeActionBtn1"
                                :type="(scope.row.sku_type == 0 && scope.row.sku_value) || (scope.row.sku_type == 1 && !scope.row.goods_skus.length) ? 'danger' : 'primary'"
                                size="small" text @click="handleSetGoodsSkus(scope.row)"
                                :loading="scope.row.skusLoading">商品规格</el-button>
                            <el-button class="noticeActionBtn1"
                                :type="scope.row.goods_banner.length == 0 ? 'danger' : 'primary'" size="small" text
                                @click="handleSetGoodsBanners(scope.row)"
                                :loading="scope.row.bannersLoading">设置轮播图</el-button>
                            <el-button class="noticeActionBtn1" :type="!scope.row.content ? 'danger' : 'primary'"
                                size="small" text @click="handleSetGoodsContent(scope.row)"
                                :loading="scope.row.contentLoading">商品详情</el-button>
                            <el-popconfirm title="是否删除该商品" confirmButtonText="确认" cancelButtonText="取消"
                                @confirm.stop="handleDelete([scope.row.id])">
                                <template #reference>
                                    <el-button class="noticeActionBtn1" type="primary" size="small" text>删除</el-button>
                                </template>
                            </el-popconfirm>
                        </div>
                        <span v-else>暂无操作</span>
                    </template>
                </el-table-column>
            </el-table>
            <div class="noticeBottom">
                <el-pagination background layout="prev,pager, next" :total="total" :current-page="currentPage"
                    :page-size="limit" @current-change="getData" />
            </div>
            <FormDrawer ref="formDrawerRef" :title="drawerTitle" @submit="handleSubmit">
                <el-form :model="form" ref="formRef" :rules='rules' label-width="80px" :inline="false">
                    <el-form-item label="商品名称" prop="title">
                        <el-input v-model="form.title" placeholder="请输入商品名称"></el-input>
                    </el-form-item>
                    <el-form-item label="封面" prop="cover">
                        <ChooseImage v-model="form.cover" />
                    </el-form-item>
                    <el-form-item label="商品分类" prop="category_id">
                        <el-select v-model="form.category_id" placeholder="选择所属商品分类">
                            <el-option v-for="item in category_list" :key="item.id" :label="item.name"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="商品描述" prop="desc">
                        <el-input v-model="form.desc" placeholder="请输入商品描述" type="textarea" :rows="5"></el-input>
                    </el-form-item>
                    <el-form-item label="单位" prop="unit">
                        <el-input v-model="form.unit" style="width: 50%" placeholder="请输入单位" :rows="5"></el-input>
                    </el-form-item>
                    <el-form-item label="总库存" prop="stock">
                        <el-input v-model="form.stock" style="width: 40%" type="number" :rows="5">
                            <template #append>
                                件
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="库存预警" prop="min_stock">
                        <el-input v-model="form.min_stock" style="width: 40%" type="number" :rows="5">
                            <template #append>
                                件
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="最低销售价" prop="min_price">
                        <el-input v-model="form.min_price" style="width: 40%" type="number" :rows="5">
                            <template #append>
                                元
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="最低原价" prop="min_oprice">
                        <el-input v-model="form.min_oprice" style="width: 40%" type="number" :rows="5">
                            <template #append>
                                元
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item label="库存显示" prop="stock_display">
                        <el-radio-group v-model="form.stock_display">
                            <el-radio :value="0">隐藏</el-radio>
                            <el-radio :value="1">显示</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item label="是否上架" prop="status">
                        <el-radio-group v-model="form.status">
                            <el-radio :value="0">放入仓库</el-radio>
                            <el-radio :value="1">立即上架</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-form>
            </FormDrawer>
        </el-card>
        <banners ref="bannersRef" @reloadData="getData"></banners>
        <content ref="contentRef" @reloadData="getData"></content>
        <skus ref="skusRef" @reload-data="getData"></skus>
    </div>
</template>
<script setup>
import { ref } from 'vue'
import FormDrawer from '@/components/FormDrawer.vue'
import ChooseImage from '@/components/ChooseImage.vue'
import ListHeader from '@/components/ListHeader.vue'
import { getGoodsList, updateGoodsStatus, createGoods, updateGoods, deleteGoods, restoreGoods, destoryGoods } from '@/api/goods'
import { useInitTable, useInitForm } from '@/hooks/useCommon'
import { getCateGoryList } from '@/api/category'
import Search from '@/components/Search.vue'
import SearchItem from '@/components/SearchItem.vue'
import banners from './components/banners.vue'
import content from './components/content.vue'
import skus from './components/skus.vue'
import { elNotification } from '@/hooks/elNotification.js'

// 搜索、获取、分页、删除、修改状态
const roles = ref([])
const {
    searchForm,
    resetSearchForm,
    tableData,
    loading,
    currentPage,
    total,
    limit,
    getData,
    handleDelete,
    mulitipTableRef,
    handleMultiDelete,
    handleSelectionChange,
    handleMultiStatusChange,
    multiSelectionId
} = useInitTable({
    searchForm: {
        title: "",
        tab: "all",
        category_id: null
    },
    getList: getGoodsList,
    onGetListSuccess: (res) => {
        tableData.value = res.list.map(o => {
            o.bannersLoading = false
            o.contentLoading = false
            o.skusLoading = false
            return o
        })
        roles.value = res.roles
        total.value = res.totalCount
    },
    delete: deleteGoods,
    updateStatus: updateGoodsStatus
})

// 新增、修改
const {
    formDrawerRef,
    formRef,
    rules,
    form,
    drawerTitle,
    handleSubmit,
    handleCreate,
    handleEdit
} = useInitForm({
    rules: {
        username: [{
            required: true,
            message: '请输入用户名',
            trigger: 'blur'
        }],
        password: [{
            required: true,
            message: '请输入密码',
            trigger: 'blur'
        }],
        role_id: [{
            required: true,
            message: '请选择所属角色',
            trigger: 'change'
        }],
        avatar: [{
            required: true,
            message: '请选择头像',
            trigger: 'change'
        }]
    },
    form: {
        title: null,
        category_id: null,
        cover: null,
        desc: null,
        unit: "件",
        stock: 100,
        min_stock: 10,
        status: 1,
        stock_display: 1,
        min_price: 0,
        min_oprice: 0
    },
    getData,
    update: updateGoods,
    create: createGoods
})

const tabbars = [{
    key: "all",
    name: "全部"
}, {
    key: "checking",
    name: "审核中"
}, {
    key: "saling",
    name: "出售中"
}, {
    key: "off",
    name: "已下架"
}, {
    key: "min_stock",
    name: "库存预警"
}, {
    key: "delete",
    name: "回收站"
}]

// 商品分类
const category_list = ref([])
getCateGoryList().then(res => {
    category_list.value = res
})

// 设置轮播图
const bannersRef = ref(null)
const handleSetGoodsBanners = (row) => {
    bannersRef.value.open(row)
}

// 设置轮播图
const contentRef = ref(null)
const handleSetGoodsContent = (row) => {
    contentRef.value.open(row)
}

// 设置商品规格
const skusRef = ref(null)
const handleSetGoodsSkus = (row) => {
    skusRef.value.open(row)
}

// 批量恢复
const handleRestoreGoods = () => restoreGoods(destoryGoods, "恢复成功")

const handleDestoryGoods = () => useMultiAction(destoryGoods, "彻底删除")


function useMultiAction(func, msg) {
    loading.value = true
    func(multiSelectionId.value).then(res => {
        elNotification(msg + "成功")
        if (mulitipTableRef.value) {
            mulitipTableRef.value.clearSelection()
        }
    }).finally(() => {
        loading.value = false
    })
}
</script> 
<style scoped lang="less">
.notice {
    border: 0;

    .noticeGoods {
        display: flex;

        .noticeGoodsImage {
            margin-right: 3px;
            border-radius: 5px;
        }

        .noticeGoodsDiv {
            flex: 1;

            .noticeGoodsDivSpan {
                color: red;
            }

            .noticeGoodsDivText {
                color: #6c6c6c;
                font-size: 14px;
            }

            .noticeGoodsP1 {
                color: #6c6c6c;
                font-size: 14px;
                margin-bottom: 5px;
            }

            .noticeGoodsP2 {
                color: #6c6c6c;
                font-size: 14px;
            }
        }


    }

    .tableAction {
        font-size: 14px;
    }

    .noticeActionBtn1 {
        padding: 0 5px;
    }


    .manager {
        display: flex;
        align-items: center;

        .mangerText {
            margin-left: 3px;
        }
    }

    .noticeBottom {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 10px;
    }

    .noticeStatusBtns {
        display: flex;
        flex-direction: column;

        .noticeStatusBtn {
            margin-top: 10px !important;
            margin-left: 0 !important;
        }
    }
}
</style>